<template>
  <div>
    <el-button @click="clearFilter">清除所有过滤器</el-button>
    <el-table ref="filterTable" :data="tableData" style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        sortable
        width="180"
        :filters="headers.date"
        :filter-method="filterHandler"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180"
        :filters="headers.name"
        :filter-method="filterHandler"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        :formatter="formatter"
        :filters="headers.address"
        :filter-method="filterHandler"
      >
      </el-table-column>
      <el-table-column
        prop="tag"
        label="标签"
        width="100"
        :filters="headers.tag"
        :filter-method="filterHandler"
        filter-placement="bottom-end"
      >
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.tag === '家' ? 'primary' : 'success'"
            disable-transitions
            >{{ scope.row.tag }}</el-tag
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      headers: { date: [], name: [], address: [], tag: [] },
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          tag: "家",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          tag: "公司",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          tag: "家",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          tag: "公司",
        },
      ],
    };
  },
  created() {
    var arry = new Array(3, 4);
    console.log(arry);
    this.tableData.forEach((item) => {
      for (let key in this.headers) {
        this.headers[key].push({
          text: item[key],
          value: item[key],
        });
      }
    });
    for (let item in this.headers) {
      this.headers[item] = [
        ...new Set(this.headers[item].map((v) => JSON.stringify(v))),
      ].map((s) => JSON.parse(s));
    }
  },
  methods: {
    resetDateFilter() {
      this.$refs.filterTable.clearFilter("date");
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    formatter(row, column) {
      return row.address;
    },
    // filterTag(value, row) {
    //   return row.tag === value;
    // },
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
  },
};
</script>